import React, { useEffect } from 'react'

export default function DuiGou() {
  useEffect(() => {
    /*
    * 本例只需修改1处，即:wh变量
    * var customPath='88,214 173,284 304,138'//对钩的位置,格式为x,y空格x,y空格x,y
    */
    var wh = 60
    var strokeWidth = 2//线的粗细
    var stroke = "#68E534"
    var animTime = '1s'
    var customPath = `${wh * 0.22},${wh * 0.535} ${wh * 0.4325},${wh * 0.71} ${wh * 0.76},${wh * 0.345}`

    document.getElementById('example').innerHTML =
      `
    <svg class="wsj_svg_wrap" style="width:${wh}px;height:${wh}px;">
      <circle class="path circle" cx="50%" cy="50%" fill="none" stroke-linecap="round" stroke="${stroke}" r="${wh / 2 - strokeWidth / 2}" stroke-width="${strokeWidth}" transform="rotate(-90 ${wh / 2} ${wh / 2})"  />
      <polyline class="path tick" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="${stroke}" points="${customPath}"  stroke-width="${strokeWidth + 2}" />
    </svg>
    `
    document.querySelector('.wsj_svg_wrap').classList.add('wsj-anim')
    document.querySelector('.wsj_svg_wrap').style.setProperty('--wh', wh)
    document.querySelector('.wsj_svg_wrap').style.setProperty('--r', wh / 2 - strokeWidth / 2)
    Array.from(document.querySelectorAll('.wsj_svg_wrap .path')).forEach(v => {
      v.style.setProperty('--l', v.getTotalLength() + 1)
      v.style.setProperty('--s', animTime)
    })
  }, [])
  return (
    <div id="example"></div>
  )
}
